<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html, body, #map {
            height: 100%;
        }
        /* CARD */
        .card {
            display: flex;
            flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex-direction: column;
            width: 44rem;
            min-width: 0;
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            padding: 0.5rem 0.5rem 0.5rem 1rem;
            background-color: #fff;
            background-clip: border-box;
            border-width: 0;
            border-radius: 1rem;
            font-size: 12px;
            font-family: Arial;
            word-wrap: break-word;
            color: #0288d1;
            display: block;
            opacity: 0.8;
            z-index: 99999
        }
          /* 工具栏样式 */
        .maptalks-toolbar {
            position: absolute;
            display: flex;
            flex-direction: column;
            gap: 10px;
            top: 20px;
            right: 20px;
            background: white;
            padding: 5px;
            border-radius: 4px;
            box-shadow: 0 1px 5px rgba(0,0,0,0.65);
            z-index: 1000;
        }
        .maptalks-toolbar button {
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            background-color: #fff;
            cursor: pointer;
            margin: 0 2px;
            border-radius: 3px;
            font-size: 16px;
            line-height: 1;
        }
        .maptalks-toolbar button:hover {
            background-color: #f0f0f0;
        }
        /* 激活状态的按钮样式 */
        .maptalks-toolbar button.active {
            background-color: #007bff;
            color: white;
            border-color: #0056b3;
        }
        #geojson-file-input {
            display: none; /* 隐藏原始文件输入框 */
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <!-- 工具栏 -->
    <div class="maptalks-toolbar">
        <button id="import-btn" title="导入 GeoJSON">+</button>
        <button id="trans-btn" title="高德坐标系到天地图">↑↓</button>
        <button id="move-btn" title="移动对象">M</button>
        <button id="edit-btn" title="编辑对象">E</button>
        <button id="clear-btn" title="清除对象">C</button>
        <button id="save-btn" title="保存对象">S</button>
        <button id="cursor-btn" title="手型工具">↖</button>
        <button id="polygon-btn" title="绘制多边形">☆</button>
        <button id="line-btn" title="绘制线">\</button>
        <button id="point-btn" title="绘制点">∵</button>
        <button id="circle-btn" title="绘制圆形">○</button>
        <button id="rectangle-btn" title="绘制矩形">□</button>
        <button id="remove-btn" title="清除">〤</button>
    </div>
    <div class="card">
        【双击可以重复绘制】
        点击坐标：<span id="map-click">121.498586,31.239637</span>
        地图层级：<span id="map-zoom">11</span> :
        中心坐标：<span id="map-center">121.498586,31.239637</span>
    </div>

    <!-- 隐藏的文件输入框 -->
    <input type="file" id="geojson-file-input" accept=".geojson,.json">
</body>
</html>

<link rel="stylesheet" href="maptalks.css">
<script type="text/javascript" src="maptalks.js"></script>
<script type="text/javascript" src="tool.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="geoJsonConverter.js"></script>
<script src="https://unpkg.com/geojson-vt@3.2.1/geojson-vt.js"></script>
<script>
    var key = "69c762f595c6905fa353d126bc39b1f0";
    var zoomMin = 10;
    var zoomMax = 19;
    var zoomDisp = 16;
    var ct = new maptalks.Coordinate(119.906648630289169, 29.963048255594003);

    // map
    var map = new maptalks.Map('map', {
        center: ct,
        zoom: zoomDisp,
        centerCross: false,
        zoomControl: {
            'position': 'top-left',
            'slider': true,
            'zoomLevel': true
        },
        scaleControl: {
            'position': 'bottom-right',
            'maxWidth': 100,
            'metric': true,
            'imperial': false
        },
        dragPitch: true,  //allow map to drag pitching, true by default
        dragRotate: false, //allow map to drag rotating, true by default
        dragRotatePitch: false,  //enable map to drag pitching and rotating at the same time, false by default
        baseLayer: new maptalks.TileLayer('base', {
            urlTemplate: 'http:////t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=' + key,
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            attribution: '&copy; <a href="http://tianditu.com">TianDiTu</a> contributors, &copy;'
        })
    });

    const labelLayer = new maptalks.TileLayer("label", {
        urlTemplate:
        "https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" +
        key,
        subdomains: ["1", "2", "3", "4", "5"],
        zIndex: 1000,
    });
    labelLayer.addTo(map);

    // 显示地图层级与中心点信息
    map.on('moving', showMapInfo);
    map.on('zoomend', showMapInfo);
    function showMapInfo() {
        var zoom = Number(map.getZoom());
        var center = map.getCenter();
        document.querySelector("#map-zoom").innerText = zoom.toFixed(2);
        document.querySelector("#map-center").innerText = center.x.toFixed(6).toString() + ', ' + center.y.toFixed(6).toString();
    }
    showMapInfo();

    map.on('click', function(e) {
        const lng = e.coordinate.x;
        const lat = e.coordinate.y;

        // 格式化坐标，保留6位小数
        const formattedLng = lng.toFixed(6);
        const formattedLat = lat.toFixed(6);

        // 更新右下角坐标显示元素的内容
        document.querySelector('#map-click').innerText = `${formattedLng},${formattedLat}`;
    });

    // 2. 定义样式函数
    // 根据层级和属性动态设置样式
    function getVectorStyle(geometry, properties, z, x, y) {
        // 假设你的 GeoJSON 中有一个 'type' 属性
        if (!properties) return null;

        // 默认样式
        return {
            'polygonFill': 'rgb(224,224,224)',
            'polygonOpacity': 0.8,
            'lineColor': '#ccc',
            'lineWidth': 1
        };
    }

    // 2. 定义一个加载范围（例如：宁波市的大致范围）
    //  new maptalks.Extent(minX, minY, maxX, maxY)
    const ningboBounds = [119.896242,29.963020, 119.904932,29.971088];

    // 3. 创建并启动 VectorTileTool
    const vectorTileTool = VectorTileTool(
        map, // 地图实例
        'tiles/{z}/{x}/{y}.geojson', // 你的 GeoJSON 文件路径模板
        {
            style: getVectorStyle, // 传入样式函数
            maxExtent: ningboBounds, // 可选，设置地图范围
            keepInvisibleTiles: false // 设置为 false 以释放内存
        }
    );

    // 4. 启动它！
    vectorTileTool.start();

    // (可选) 在某些时候，你可以手动刷新或销毁它
    // 例如，在组件卸载时
    // window.addEventListener('beforeunload', () => {
    //     vectorTileTool.destroy();
    // });

    const tools = setupGeoJSONImportTool(map);

    const transBtn = document.getElementById("trans-btn");

    setupDrawTool(map);
</script>